<script setup>
  import { onMounted, ref } from 'vue'
  import {
    onLoad,
    onShow,
    onReachBottom,
    onPullDownRefresh,
  } from '@dcloudio/uni-app'
  import { http } from '@/utils/http.js'
  import { parseTime } from '@/utils/index.js'

  const keywords = ref('')
  function searchSend() {
    if (keywords.value == '') {
      return
    }
    if (activeIndex.value == 0) {
      goodsList.value = []
      getgoods()
    } else {
      txList.value = []
      wxList.value = []
      getdrawList()
    }
  }

  //tab
  const activeIndex = ref(0)
  const offsetTop = ref(0)
  function chooseTab(name, title) {
    if (keywords.value == '') {
      return
    }
    isYs.value = 0
    iscurrent.value = ''
    sales.value = ''
    price.value = ''
    sort.value = ''
    currentPage.value = 1
    txList.value = []
    wxList.value = []
    goodsList.value = []
    activeIndex.value = name
    if (activeIndex.value == 0) {
      getgoods()
    } else {
      console.log('zou')
      getdrawList()
    }
  }

  //搜索赏品
  //获取商品
  const goodsList = ref([])
  const sort = ref('')
  const currentPage = ref(1)
  const isYs = ref(0)
  async function getgoods() {
    console.log(keywords.value)
    const res = await http.request({
      url: '/api/goods/getGoods',
      method: 'POST',
      data: {
        page: currentPage.value,
        limit: 10,
        class_id: 0,
        keywords: keywords.value,
        order_by: sort.value,
        is_ys: isYs.value,
      },
    })
    goodsList.value = [...goodsList.value, ...res.data]
    console.log(goodsList.value)
  }

  async function hope(id) {
    const res = await http.request({
      url: '/api/goods/scPost',
      method: 'POST',
      data: {
        id: id,
        type: '1',
      },
    })
    if (res.st == 1) {
      goodsList.value.forEach((item) => {
        if (item.id == id) {
          if (item.is_sc == 1) {
            --item.sc_num
            item.is_sc = 0
          } else if (item.is_sc == 0) {
            ++item.sc_num
            item.is_sc = 1
          }
        }
        console.log(item)
      })
      uni.showToast({
        title: '操作成功',
        duration: 2000,
      })
    } else {
      uni.showToast({
        title: '操作失败',
        icon: 'error',
        duration: 2000,
      })
    }
  }

  // 排序
  const iscurrent = ref('')
  const sales = ref('')
  const price = ref('')
  function sorce(now) {
    isYs.value = 0
    goodsList.value = []
    iscurrent.value = now
    if (now == 'comprehensive') {
      sales.value = ''
      price.valu = ''
      sort.value = 'comprehensive,desc'
    } else if (now == 'sales_initial') {
      price.value = ''
      if (sort.value == 'sales_initial,desc') {
        sort.value = 'sales_initial,asc'
        sales.value = 'asc'
      } else if (sort.value == 'sales_initial,asc') {
        sort.value = 'sales_initial,desc'
        sales.value = 'desc'
      } else {
        sort.value = 'sales_initial,desc'
        sales.value = 'desc'
      }
    } else if (now == 'price') {
      sales.value = ''
      if (sort.value == 'price,desc') {
        sort.value = 'price,asc'
        price.value = 'asc'
      } else if (sort.value == 'price,asc') {
        sort.value = 'price,desc'
        price.value = 'desc'
      } else {
        sort.value = 'price,desc'
        price.value = 'desc'
      }
    }
    if (activeIndex.value == 0) {
      goodsList.value = []
      getgoods()
    } else {
      txList.value = []
      wxList.value = []
      getdrawList()
    }
  }

  function goodslower() {
    ++currentPage.value
    getgoods()
  }
  // function YS() {
  // 	goodsList.value = []
  // 	isYs.value = 1
  // 	iscurrent.value = 'ys'
  // 	getgoods()
  // }

  function wxlower() {
    ++currentPage.value
    getdrawList()
  }

  function txlower() {
    ++currentPage.value
    getdrawList()
  }
  // 去看商品详情
  function goMallInfo(id) {
    uni.navigateTo({
      url: `/homePage/goodsinfo/index?id=${id}`,
    })
  }

  //盲盒搜索
  //跳转天选
  const txList = ref([])
  const wxList = ref([])
  async function getdrawList() {
    const res = await http.request({
      url: '/api/box/boxList',
      method: 'POST',
      data: {
        page: currentPage.value,
        limit: 10,
        type: activeIndex.value,
        scene: 0,
        keywords: keywords.value,
        order_by: sort.value,
      },
    })
    if (activeIndex.value == 1) {
      txList.value = [...txList.value, ...res.data]
    } else if (activeIndex.value == 2) {
      wxList.value = [...wxList.value, ...res.data]
    }
  }
  function goTX(id) {
    uni.navigateTo({
      url: `/drawPage/txDraw/index?id=${id}`,
    })
  }
  //跳转无限
  function goWX(id) {
    uni.navigateTo({
      url: `/drawPage/wxDraw/index?id=${id}`,
    })
  }
</script>

<template>
  <view class="mall">
    <view class="" style="padding: 0 20rpx; background-color: #fff">
      <uni-search-bar
        class="uni-mt-10"
        radius="28"
        placeholder="搜索..."
        clearButton="none"
        cancelButton="none"
        @confirm="searchSend"
        @clear="searchSend"
        v-model="keywords"
        bgColor="#ECEDEE"
        :focus="true"
      />
    </view>
    <y-tabs
      v-model="activeIndex"
      sticky
      :offsetTop="offsetTop"
      @change="chooseTab"
    >
      <y-tab class="y-tab-virtual" :title="'商品'" name="0">
        <view class="content-goods-wrap">
          <!-- 筛选 -->
          <view class="sort">
            <view
              class="sort-item"
              :class="{ active: iscurrent == 'comprehensive' }"
              @click="sorce('comprehensive')"
            >
              综合
            </view>
            <view class="sort-item">
              <view
                :class="{
                  active: iscurrent == 'sales_initial',
                }"
                @click="sorce('sales_initial')"
              >
                销量
              </view>
              <image
                style="width: 14rpx; height: 24rpx"
                src="../../static/asc.png"
                v-if="sales == 'asc'"
              ></image>
              <image
                style="width: 14rpx; height: 24rpx"
                src="../../static/desc.png"
                v-else-if="sales == 'desc'"
              ></image>
              <image
                style="width: 14rpx; height: 24rpx"
                src="../../static/sort.png"
                v-else
              ></image>
            </view>
            <view class="sort-item">
              <view
                :class="{ active: iscurrent == 'price' }"
                @click="sorce('price')"
              >
                价格
              </view>
              <image
                style="width: 14rpx; height: 24rpx"
                src="../../static/asc.png"
                v-if="price == 'asc'"
              ></image>
              <image
                style="width: 14rpx; height: 24rpx"
                src="../../static/desc.png"
                v-else-if="price == 'desc'"
              ></image>
              <image
                style="width: 14rpx; height: 24rpx"
                src="../../static/sort.png"
                v-else
              ></image>
            </view>
            <!-- <view
							class="sort-item"
							:class="{ active: iscurrent == 'ys' }"
							@click="YS()"
						>
							预售
						</view> -->
          </view>
          <!-- 商品 -->
          <scroll-view
            scroll-y="true"
            class="scroll-Y"
            style="height: 82vh"
            @scrolltolower="goodslower"
          >
            <view class="goods">
              <view
                v-for="item in goodsList"
                :key="item.id"
                class="goods-item"
                @click="goMallInfo(item.id)"
              >
                <view class="" style="position: relative">
                  <image
                    style="width: 350rpx; height: 350rpx; display: block"
                    :src="item.img"
                  ></image>
                  <view class="ys-bar" v-if="item.is_ys == 1">
                    {{ parseTime(item.ys_time) }} 开售
                  </view>
                </view>
                <text class="goods_name">{{ item.goods_name }}</text>
                <view class="price">
                  <view
                    class=""
                    style="display: flex; align-items: center"
                    v-if="item.is_integral == 1"
                  >
                    <image
                      style="width: 28rpx; height: 28rpx; margin-right: 10rpx"
                      src="../../static/icon.png"
                      mode=""
                    ></image>
                    <text
                      style="
                        font-size: 26rpx;
                        line-height: 28rpx;
                        color: #f75b5b;
                      "
                      >{{ item.integral }}</text
                    >
                  </view>
                  <text v-else style="font-size: 26rpx; color: #f75b5b"
                    >￥{{ item.price }}</text
                  >
                  <view class="love">
                    <uni-icons
                      :type="item.is_sc == 0 ? 'heart' : 'heart-filled'"
                      :color="item.is_sc == 1 ? '#EC5050' : ''"
                      size="17"
                      @tap.stop="hope(item.id)"
                    ></uni-icons>
                    <text
                      style="
                        font-size: 22rpx;
                        padding-left: 8rpx;
                        height: 34rpx;
                      "
                      >{{ item.sc_num }}</text
                    >
                  </view>
                </view>
              </view>
            </view>
          </scroll-view>
        </view>
      </y-tab>
      <y-tab class="y-tab-virtual" :title="'无限赏'" name="2">
        <!-- 筛选 -->
        <view class="sort">
          <view class="sort-item">
            <view
              :class="{ active: iscurrent == 'price' }"
              @click="sorce('price')"
            >
              价格
            </view>
            <image
              style="width: 14rpx; height: 24rpx"
              src="../../static/asc.png"
              v-if="price == 'asc'"
            ></image>
            <image
              style="width: 14rpx; height: 24rpx"
              src="../../static/desc.png"
              v-else-if="price == 'desc'"
            ></image>
            <image
              style="width: 14rpx; height: 24rpx"
              src="../../static/sort.png"
              v-else
            ></image>
          </view>
        </view>
        <scroll-view
          scroll-y="true"
          class="scroll-Y"
          style="height: 82vh"
          @scrolltolower="txlower"
        >
          <view class="content-wrap" style="background-color: #fff">
            <view
              v-for="item in wxList"
              :key="'wx' + item.id"
              class="wx-item"
              @click="goWX(item.id)"
            >
              <view class="wx-left">
                <image
                  style="height: 256rpx; width: 254rpx"
                  :src="item.img"
                  mode=""
                ></image>
              </view>
              <view class="wx-right">
                <view style="font-size: 28rpx">{{ item.name }}</view>
                <view class="money" style="color: #eb2c2c">
                  <text style="font-size: 20rpx">￥</text>
                  <text style="font-size: 30rpx">{{ item.price }}</text>
                </view>
                <view class="reward-list">
                  <view style="margin-bottom: 10rpx; font-size: 20rpx"
                    >奖池列表</view
                  >
                  <view class="scroll-list">
                    <view class="scroll" :style="{ '--imgnum': 6 }">
                      <view
                        class="scroll-item"
                        v-for="goods in [...item.box_goods, ...item.box_goods]"
                        :key="'wxgoods' + goods.id"
                      >
                        <image
                          style="width: 68rpx; height: 68rpx"
                          :src="goods.img"
                          mode=""
                        ></image>
                      </view>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </scroll-view>
      </y-tab>
      <y-tab class="y-tab-virtual" :title="'天选之人'" name="1">
        <!-- 筛选 -->
        <view class="sort">
          <view class="sort-item">
            <view
              :class="{ active: iscurrent == 'price' }"
              @click="sorce('price')"
            >
              价格
            </view>
            <image
              style="width: 14rpx; height: 24rpx"
              src="../../static/asc.png"
              v-if="price == 'asc'"
            ></image>
            <image
              style="width: 14rpx; height: 24rpx"
              src="../../static/desc.png"
              v-else-if="price == 'desc'"
            ></image>
            <image
              style="width: 14rpx; height: 24rpx"
              src="../../static/sort.png"
              v-else
            ></image>
          </view>
        </view>
        <scroll-view
          scroll-y="true"
          class="scroll-Y"
          style="height: 82vh"
          @scrolltolower="wxlower"
        >
          <view class="content-wrap" style="background-color: #fff">
            <view
              v-for="item in txList"
              :key="'tx' + item.id"
              class="tx-item"
              @click="goTX(item.id)"
            >
              <view class="top">
                <text style="font-size: 46rpx; color: #725cff">{{
                  item.name
                }}</text>
                <text style="font-size: 28rpx; color: #fff"
                  >剩余{{ item.leftover + '/' + item.sum }}</text
                >
              </view>
              <view class="image-group">
                <view class="img-left">
                  <image
                    style="width: 267rpx; height: 316rpx"
                    :src="item.img"
                    mode=""
                  ></image>
                </view>
                <view class="img-right">
                  <view
                    class="img-item"
                    v-for="good in item.box_goods"
                    :key="'good' + good.id"
                  >
                    <image
                      style="
                        width: 165rpx;
                        height: 152rpx;
                        background-color: #fff;
                      "
                      :src="good.img"
                      mode=""
                    ></image>
                  </view>
                </view>
              </view>
              <view class="corner">
                <text style="font-size: 28rpx">￥</text>
                <text style="margin-right: 4rpx; font-size: 36rpx">{{
                  Number(item.price).toFixed(0)
                }}</text>
                <text style="font-size: 24rpx">每抽</text>
              </view>
            </view>
          </view>
        </scroll-view>
      </y-tab>
    </y-tabs>
  </view>
</template>

<style lang="scss" scoped>
  .mall {
    background-color: #f5f5f5;

    .uni-mt-10 {
      width: 100%;
    }
    ::v-deep .uni-searchbar {
      width: 100%;
      padding: 0;
      margin-top: 22rpx;
    }
    ::v-deep .uni-searchbar__box {
      width: 100%;
      height: 56rpx;
      border: none;
      justify-content: start;
      // border-radius: 28rpx;
      // background-color: #ECEDEE;
      // padding: 0 20rpx;
      // box-sizing: border-box;
    }
    .sort {
      display: flex;
      align-items: center;
      width: 95%;
      padding: 22rpx;
      background-color: #fff;
      font-size: 26rpx;
      .sort-item {
        display: flex;
        align-items: center;
        margin-right: 34rpx;
      }
    }
    .goods {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      width: 95%;
      padding: 20rpx;
      .goods-item {
        width: 350rpx;
        height: 542rpx;
        margin-bottom: 14rpx;
        background-color: #fff;
        border-radius: 14rpx;
        .ys-bar {
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          height: 50rpx;
          background-color: rgba(0, 0, 0, 0.5);
          color: white;
          font-size: 24rpx;
          line-height: 50rpx;
          text-align: center;
        }
        .goods_name {
          height: 74rpx;
          width: 100%;
          padding: 0 8rpx;
          // display: block;
          font-size: 28rpx;
          box-sizing: border-box;

          display: -webkit-box;
          -webkit-line-clamp: 2; /* 限制为两行 */
          -webkit-box-orient: vertical;
          overflow: hidden; /* 隐藏超出部分 */
          text-overflow: ellipsis; /* 超出部分用省略号表示 */
          white-space: normal; /* 允许换行 */
          /* 你可能还想设置一些其他样式，比如宽度、字体大小等 */
        }
        .price {
          width: 100%;
          box-sizing: border-box;
          margin-top: 32rpx;
          padding: 0 8rpx;
          display: flex;
          align-items: center;
          justify-content: space-between;
          .love {
            display: flex;
            align-items: center;
            margin-bottom: 10rpx;
          }
        }
      }
    }
    .active {
      color: $all-color;
    }
  }
  .content-wrap {
    // height: 100%;
    padding: 30rpx 20rpx 0rpx 20rpx;
    // overflow-y: auto;
    // overflow-x: hidden;
    box-sizing: border-box;
    .tx-item {
      position: relative;
      height: 424rpx;
      margin-bottom: 30rpx;
      padding: 24rpx 28rpx 0 24rpx;
      background: url('https://ojqn.wm2177.com/wechat_imgs/txbg.png') no-repeat;
      background-size: 100%;
      box-sizing: border-box;
      .top {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: start;
      }
      .image-group {
        margin-top: 8rpx;
        display: flex;
        justify-content: space-between;
        .img-left {
          height: 316rpx;
          border-radius: 24rpx;
          margin-right: 22rpx;
          background-color: #fff;
          overflow: hidden;
          flex-shrink: 0;
        }
        .img-right {
          display: flex;
          justify-content: space-evenly;
          flex-wrap: wrap;
          .img-item {
            width: 165rpx;
            height: 152rpx;
            border-radius: 12rpx;
            background-color: #fff;
            overflow: hidden;
          }
        }
      }
      .corner {
        position: absolute;
        left: 0;
        bottom: 4rpx;
        width: 183rpx;
        height: 68rpx;
        border-radius: 0rpx 24rpx 0rpx 18rpx;
        background-color: #fd40a2;
        color: #fff;
        line-height: 68rpx;
        text-align: center;
      }
      &:last-child {
        margin-bottom: 300rpx;
      }
    }
    .wx-item {
      display: flex;
      align-items: center;
      height: 256rpx;
      margin-bottom: 26rpx;
      // background-color: pink;
      .wx-left {
        margin-right: 22rpx;
        border-radius: 6rpx;
        overflow: hidden;
      }
      .wx-right {
        height: 100%;
        width: 62%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .reward-list {
          width: 100%;
          height: 128rpx;
          padding: 12rpx 0 0 4rpx;
          border-radius: 4rpx;
          background-color: #f9fafc;
          box-sizing: border-box;
          .scroll-list {
            width: 430rpx;
            overflow: hidden;
            // width: calc(72rpx * var(--imgnum));
            .scroll {
              height: 84rpx;
              display: flex;
              // width: calc(72rpx * var(--imgnum));
              animation: scroll 20s linear infinite;
              .scroll-item {
                width: 72rpx;
                height: 72rpx;
                // margin: 3rpx;
                border-radius: 6rpx;
                flex-shrink: 0;
                overflow: hidden;
                box-sizing: border-box;
              }
            }
          }
        }
      }

      &:last-child {
        margin-bottom: 300rpx;
      }
    }
  }
  @keyframes scroll {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(calc(-426rpx)); /* 单个图片宽度 * 图片数量的一半 */
    }
  }
  /* #ifdef MP-QQ || MP-BAIDU || MP-TOUTIAO || MP-LARK || MP-KUAISHOU */
  .y-tab-virtual {
    position: relative;
    flex-shrink: 0;
    width: 100%;
  }
  ::v-deep .y-tabs__ellipsis {
    overflow: visible !important;
  }
  .content-wrap {
    // height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
  }
  ::v-deep .y-tab {
    margin: 0 20rpx;
  }
  ::v-deep .y-tab__text {
    font-size: 26rpx;
  }
  ::v-deep .y-tabs__bar {
    background-color: #7863ff !important;
  }
</style>
